<template>
<div class='container-channelEdit'>
  <!-- 当前登陆用户已经订阅的频道 -->
  <div class="channel">
    <van-cell title="我的频道" :border="false">
      <van-button
      size="mini"
      type="plain"
      @click="editing=!editing"
      class="editBtn"
      >{{editing? '取消': '编辑'}}</van-button>
    </van-cell>
    <van-grid>
      <van-grid-item
      v-for="item in channels"
      :key="item.id"
      @click="hClickMyChannel(item)"
      :class="{'cur':item.id===channelID}"
      >
        <span>{{item.name}}</span>
        <!--
            我的频道上的x按钮
            1. 只有在编辑状态时，才可见
          1 2. 推荐频道始终是不能删除的，它不应该显示x
               推荐频道的id一直是0
          -->
          <!-- 编辑时候关闭的图标 -->
        <van-icon v-show="editing && item.id!== 0" name="cross" class="btn"></van-icon>
      </van-grid-item>
    </van-grid>
    </div>
     <!-- 当前登陆用户没有订阅的频道 -->
  <div class="channel">
    <van-cell title="可选频道" :border="false"></van-cell>
    <van-grid>
      <van-grid-item
       v-for="item in recommendChannels"
       :key="item.id"
       @click="hAddChannel(item)"
       >
        <span>{{item.name}}</span>
      </van-grid-item>
    </van-grid>
  </div>
</div>
</template>
<script>
// 调用封装好的获取所有文章接口
import { getAllChannels, addChannel, deleteChannel } from '@/api/channel.js'
export default {
  name: 'page-channelEdit',
  // 接受从父组件@/home/index.vue的频道
  props: ['channels', 'channelID'],
  data () {
    return {
      // 所有的频道信息
      allChannels: [],
      editing: false // 是否处于编辑状态
    }
  },
  created () {
    this.getAllChannels()
  },
  // 在计算属性里面做频道加减 因为可以实时监听
  computed: {
  // 可选频道
    recommendChannels () {
      // 可选频道=总频道-我的频道
      // 对所有频道进行过滤，只留下那些个 没有出现在 我的频道中的 数据
      const res = this.allChannels.filter(channel => {
      // 只留下那些个 没有出现在 我的频道中的 数据
      // 去到我的频道中找一下channel,如果找到说明已经出现在我的频道，则不要保留；找不到，则留下
        const idx = this.channels.findIndex(item => item.id === channel.id)
        // 如果没找到
        if (idx === -1) {
          // 没有找到
          return true
        } else {
          return false
        }
      })
      return res
    }
  },
  methods: {
    // 获取全部频道列表
    async getAllChannels () {
      const res = await getAllChannels()
      console.log(res)
      this.allChannels = res.data.data.channels
    },
    // 弹出层 我的频道 点击事件
    async hClickMyChannel (channel) {
      if (this.editing) {
        // 删除频道
        if (channel.id === 0) {
          // 推荐频道id是0 所以不能删除
          return
        }
        // 1. 请求接口。不再去订阅这个频道了
        const res = await deleteChannel(channel.id)
        console.log(res)
        const idx = this.channels.findIndex(item => item.id === channel.id)
        if (idx !== -1) {
          this.channels.splice(idx, 1)
          // 1) 修改了已经订阅的频道   减少出一项
          // 2) 会激活计算属性再次工作，修改可选频道会多一项
          // 3) 它还会去修改父组件中的channels。原因是channels本身就是通过props从父组件传递过来的 数组
          // 如果当前要删除的频道 在 当前选中的频道之前，则还要去修改一下父组件中activeIndx
          if (idx < this.activeIndex) {
            this.$emit('updateCurIndex', this.activeIndex - 1)
          }
        }
      } else {
        // 抛出事件  让父组件home/index.vue接收
        this.$emit('updateCurChannel', channel)
      }
    },
    // 弹出层  可选频道 点击事件
    async hAddChannel (channel) {
      // 1. 组装参数，改造 成api要的格式
      //    在用户原来的订阅频道的基础上，添加这个频道
      let curChannelList = [...this.channels, channel]
      curChannelList = curChannelList.map((item, idx) => {
        return {
          id: item.id,
          seq: idx
        }
      })
      // 去掉推荐频道。 由于推荐频道总是第一个位置，所以这里直接删除它
      curChannelList.splice(0, 1)
      console.log(curChannelList)
      // 调用接口
      const res = await addChannel(curChannelList)
      console.log(res)
      // 更新视图
      this.channels.push(channel)
    }
  }
}
</script>
 <style lang='less' scoped>
 .channel{
    padding:15px;
    font-size:14px;
  }
  .btn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 24px;
}
// 点击频道的时候  高亮显示
.cur{
  color: red;
  font-weight: 700;
}
// 编辑按钮样式
.editBtn {
    color: rgb(229, 97, 91) !important;
    margin-right:10px;
    padding:0 10px;
    border-color: rgb(229, 97, 91);
  }
</style>
